<template>
	<!-- 加盟申请 -->
	<view class="content displayColumn display all_item width_750 ">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">加盟申请</text>
			</template>
		</u-navbar>
		<template v-if="flag">
			<view class="fn_content display  displayColumn width_750 all_item M-T30 fontSize font_comm" >
				<view class="fn_content_item display  width_699 displayColumn">
					<view class="item_one display  width-100 displaycenter_aliem M-T30">
						<span class="fn_txt1 M-L30">姓名</span>
						<input type="text" placeholder="请输入姓名" class="input" placeholder-class="input1"
							v-model="FormData.name" />
					</view>
					<!-- 线 -->
					<view class="fn_lines display M-L24 M-T30"></view>
					<view class="item_one display  width-100 displaycenter_aliem M-T30">
						<span class="fn_txt1 M-L30">电话</span>
						<input type="text" placeholder="请输入电话号码" class="input" placeholder-class="input1"
							v-model="FormData.phoneNumber" />
					</view>
					<!-- 线 -->
					<view class="fn_lines display M-L24 M-T30"></view>
					<!-- <view class="item_one display  width-100 displaycenter_aliem M-T30" @click="show = true"> -->
					 <view class="item_one display  width-100 displaycenter_aliem M-T30"> 
						<span class="fn_txt1 M-L30">所在地址</span>
						<view class="display displaycenter_aliem">
							<!-- <input type="text" placeholder="选择省市区县" :disabled="true" class="input"
								placeholder-class="input1" v-model="FormData.address"
								style="width: 200rpx;margin-right: 185rpx;" /> -->
								<picker  mode="region" @change="cityChange">
											<view class="input" style="width: 200rpx;margin-right: 185rpx;">{{FormData.address}}</view>
								</picker>
							<uni-icons type="right" size="18" color="#72778A" class="M-L20"
								style="margin-right: 20rpx;"></uni-icons>
						</view>
					</view>
					<!-- 线 -->
					<view class="fn_lines display M-L24 M-T30"></view>
					<view class="item_one display  width-100 displaycenter_aliem M-T30">
						<span class="fn_txt1 M-L30">是否已有门站</span>
						<u-radio-group labelSize="14" v-model="FormData.menzhan" placement="row">
							<u-radio activeColor="#126BC9" v-for="(item, index) in radiolist1" :key="index"
								:label="item.name" :name="item.name" @change="radioChange"
								:customStyle="{marginLeft: '19px'}"></u-radio>
						</u-radio-group>
					</view>
					<!-- 线 -->
					<view class="fn_lines display M-L24 M-T30"></view>
					<view class="item_one display  width-100 displaycenter_aliem M-T30">
						<span class="fn_txt1 M-L30">经营状态</span>
						<u-radio-group labelSize="14" v-model="FormData.status" placement="row">
							<u-radio activeColor="#126BC9" v-for="(item, index) in radiolist2" :key="index"
								:label="item.name" :name="item.name" @change="radioChange1"
								:customStyle="{marginLeft: '47px'}"></u-radio>
						</u-radio-group>
					</view>
					<!-- 线 -->
					<view class="fn_lines display M-L24 M-T30"></view>
					<view class="item_one display  width-100 displaycenter_aliem M-T30">
						<span class="fn_txt1 M-L30">所属行业</span>
						<input type="text" placeholder="选择您所在的所属行业" :disabled="true" class="input12"
							placeholder-class="input1" v-model="FormData.hangye" style="text-align: left;" />
					</view>
					<view class="item_one display  width-100 displaycenter_aliem " style="justify-content: flex-end;">
						<view class="jies display ">
							<u-radio-group v-model="FormData.hangye" placement="column">
								<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist3"
									:key="index" :label="item.companyType" :name="item.companyType" @change="radioChange3(item)">
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="fn_card1 all_item display  width_699 displayColumn font_comm fontSize M-T30">
				<image class="fn_images" :src="FormData.imgs1" mode=""></image>
				<span class="fn_ttnx1 M-T24">提交成功！</span>
				<span class="fn_ttnx2 M-T24">请耐心等待，我们将在48小时内联系您请注意接听电话！</span>
			</view>
		</template>
		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
		<view class="position_bottm" v-if="flag">
			<button class="fn_nts1 display all_item" @click="submit">提交申请</button>
		</view>
		<view class="position_bottm" v-if="!flag">
			<button class="fn_nts1 display all_item" @click="getBack()">返回个人中心</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:true,
				show: false,
				FormData: {
					name: '', //姓名
					phoneNumber: '', //电话号码
					address: '河北省-石家庄',
					menzhan: '是', //是否已有门站 false 没有 true有
					status: '已开业',
					hangye: '',
					imgs1:this.$imgUrls + '2024/11/15/7b3fea96330f4edabd6ef7fa955286b2.png'

				},
				radiolist1: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				radiolist2: [{
						name: '已开业',
						disabled: false
					},
					{
						name: '筹备开业',
						disabled: false
					}
				],
				radiolist3: [{
						name: '加油站',
						disabled: false
					},
					{
						name: '汽修站',
						disabled: false
					},
					{
						name: '保险公司',
						disabled: false
					},
					{
						name: '电信公司',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					}
				],
				
			}
		},
		onLoad() {
			// 获取行业列表
			this.getHangyeList()
		},
		methods: {
			submit(){
				
				if(this.FormData.name==''){
					this.$modal.msg('姓名不能为空!')
					return false
				}else if(this.FormData.phoneNumber==''){
					this.$modal.msg('电话号码不能为空!')
					return false
				}else if(this.FormData.address==''){
					this.$modal.msg('地址不能为空!')
					return false
				}else if(this.FormData.hangye==''){
					this.$modal.msg('行业类型不能为空!')
					return false
				}
				this.$modal.loading('加载中');
				let data = {
					applyUserName:this.FormData.name,
					phone:this.FormData.phoneNumber,
					address:this.FormData.address.split('-').join(''),
					havaStore:this.FormData.menzhan=='是'?0:1,
					nanageStatus:this.FormData.status=='已开业' ?0:1,
					companyType:this.FormData.hangye
				}
				console.log(data)
				this.$req.post('/xcx/applyInfo',data).then(res=>{
					console.log(res)
					this.$modal.closeLoading();
					if(res.data.code==200){
						this.flag = false;
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			getHangyeList(){
				let data = {
					pageSize:20,
					pageNum:1
				}
				this.$req.get('/xcx/companyType/list',data).then(res=>{
					console.log(res)
					if(res.data.code!=200){
						this.$modal.msg(res.data.msg);
						return false;
					}
					this.radiolist3 = res.data.rows;
					
				})
			},
			getBack(){
				uni.reLaunch({
					url:'/pages/user/user'
				})
			},
			cityChange(e) {
				console.log(e)
				this.FormData.address = e.detail.value.join('-')
			},
			confirm() {
				this.show = false;
			},
			radioChange(e) {
				console.log(e, '===')
			},
			radioChange1(e) {
				console.log(e)
			},
			radioChange3(e) {
				console.log(e)
				this.FormData.hangye = e.companyType
			},
			changeHandler(e) {
				console.log(e)
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				this.FormData.address = e.value.join('-')
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}

	.fn_content_item {
		width: 690rpx;
		min-height: 762rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_txt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
		white-space: nowrap;
	}

	.input {
		font-weight: 400;
		font-size: 28rpx;
		color: #000;
		text-align: left;
		width: 400rpx;
		padding-right: 10rpx;
		margin-right: 60rpx;
	}

	.input1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #72778A;
		// margin-left: 132rpx;
		margin-right: 60rpx;
	}

	.input12 {
		font-weight: 400;
		font-size: 28rpx;
		color: #72778A;
		// margin-left: 132rpx;
		margin-right: 160rpx;
	}

	.fn_lines {
		width: 630rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
	}

	.item_one {
		justify-content: space-between;
	}

	.jies {
		flex-wrap: wrap;
		width: 350rpx;
		min-height: 300rpx;
		margin-right: 100rpx;
	}
	.position_bottm{
		position: absolute;
		bottom: 108rpx;
	}
	.fn_nts1{
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		
	}
	.fn_card1{
		height: 560rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_images{
		width: 400rpx;
		height: 280rpx;
	}
	.fn_ttnx1{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000
	}
	.fn_ttnx2{
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
</style>